<template>
    <div class="product">
        <el-button type="primary" @click="addStu">添加项目</el-button>
        <Dialog ref="stuDialog" :visible="visible" @ok="ok" @cancel="cancel"></Dialog>
        <!-- 表格 -->
        <template>
            <el-table v-loading="loading" :data="stuData" border style="width: 100%">
                <el-table-column label="头像" align="center">
                    <template v-slot="{ row: { headimgurl } }">
                        <el-avatar size="large" shape="square" :src="
                            headimgurl
                                ? headimgurl
                                : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
                        "></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="age" label="年龄" align="center"></el-table-column>
                <el-table-column prop="degree" label="学历" align="center"></el-table-column>
                <el-table-column width="300" prop="productUrl" label="项目" align="center"></el-table-column>
                <el-table-column prop="cTime" label="创建时间" align="center"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template v-slot="{ row }">
                        <el-button type="primary" size="mini" icon="el-icon-view">
                            查看
                        </el-button>
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(row)">
                            编辑
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delStu(row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination hide-on-single-page @current-change="pageChange" :pageSize="pageSize" background
                layout="prev, pager, next" :total="total"></el-pagination>
        </template>
    </div>
</template>

<script>
import Dialog from "@/components/Dialog";
import * as api from "@/api/stu";

export default {
    data() {
        return {
            visible: false,
            stuData: [],
            loading: false,
            total: 0,
            pageSize: 0,
        };
    },
    meta: {
        title: "xyxmgl",
        name: "项目管理",
        icon: "iconfont icon-shangpinguanli",
    },
    components: {
        Dialog,
    },
    created() {
        //获取表格数据
        this.getStuList();
    },
    methods: {
        //导出excel
        exportExcel() {
            //导出的字段有哪些
            let titleList = [
                {
                    title: "头像地址",
                    key: "headimgurl",
                },
                {
                    title: "名字",
                    key: "name",
                },
                {
                    title: "项目",
                    key: "productUrl",
                },
            ];

            qee(titleList, this.stuData, "2205项目");
        },
        addStu() {
            //清空dialog中的数据
            this.$refs.stuDialog.stuForm = {};
            this.$refs.stuDialog.title = "增加学员信息";
            this.visible = true;
        },
        //编辑
        edit(row) {
            // console.log(row);
            // console.log(this.$refs.stuDialog)
            //数据回显
            this.$refs.stuDialog.stuForm = { ...row };
            this.$refs.stuDialog.title = "编辑学员信息";
            this.visible = true;
        },
        //删除学员信息
        delStu(row) {
            this.$confirm("该操作将永久删除数据,是否继续?", "删除提示")
                .then(() => {
                    api.deleteStu(row.sId).then((res) => {
                        if (res.data.state) {
                            this.$message.success("删除成功");
                            this.getStuList();
                        }
                    });
                })
                .catch(() => {
                    this.$message.error("已取消删除");
                });
        },
        //页码改变的时候
        pageChange(pageSize) {
            this.getStuList(undefined, pageSize);
        },
        //获取学员列表数据的方法
        getStuList(count = 8, page = 1, classes) {
            this.loading = true;
            api.getStuListApi(count, page, classes).then((res) => {
                // console.log(res);
                if (res.data.state) {
                    this.stuData = res.data.data;
                    this.total = res.data.total;
                    this.pageSize = count;
                    this.loading = false;
                }
            });
        },

        //点击了dialog确定按钮
        ok(formData) {
            // console.log("dialogOpen");

            let dialogTitle = this.$refs.stuDialog.title;

            if (dialogTitle === "增加学员信息") {
                // console.log(formData)
                api.addStu(formData).then((res) => {
                    // console.log(res);
                    if (res.data.state) {
                        //添加成功
                        //更新列表
                    }
                });
            } else if (dialogTitle === "编辑学员信息") {
                //发送编辑请求
                api.editStuApi(formData).then((res) => {
                    // console.log(res);
                    if (res.data.state) {
                        this.getStuList();
                        this.$message.success("更新成功");
                    }
                });
            }

            this.visible = false;
        },
        //点击了dialog的取消按钮
        cancel() {
            // console.log("dialogClose");
            this.visible = false;
        },
    },
};
</script>